<template>
  <!-- 树形页面 列表 -->
  <el-table
    :data="treeDatas"
    style="width: 100%; margin-bottom: 20px"
    :row-key="tableRowKey"
    border
    :default-expand-all="defaultExpandAll"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column
      v-for="(item, index) in columns"
      :key="index"
      :prop="item.name"
      :label="item.title"
      :width="item.width"
      :align="item.align"
    >
      <template slot-scope="scope">
        <span v-if="item.select">
          {{ item.options[scope.row[item.name]] }}
        </span>
        <span v-if="item.name === 'operate' && item.operate && item.operate.length > 0">
          <span
            v-for="(btn, index) in item.operate"
            :key="index"
            :style="btn.customStyle || {}"
            v-show="
              !btn.permission ||
              ($btnPermission.verify(btn.permission) &&
                (!btn.onShow || btn.onShow(scope.row)))
            "
          >
            <span v-if="!btn.more">
              <span v-if="btn.confirm">
                <el-popconfirm :title="btn.message" @confirm="btn.fun(scope.row)">
                  <el-button
                    slot="reference"
                    :style="{ color: btn.color }"
                    :type="btn.type || 'text'"
                    size="small"
                    >{{ btn.name }}</el-button
                  >
                </el-popconfirm>
              </span>
              <span v-else>
                <el-button
                  :type="btn.type || 'text'"
                  :style="{ color: btn.color }"
                  size="small"
                  @click="btn.fun(scope.row)"
                  >{{ btn.name }}</el-button
                >
              </span>
            </span>
            <span v-else>
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ btn.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(dropMenu, index) in btn.more"
                    :key="index"
                    v-show="
                      !dropMenu.permission || $btnPermission.verify(dropMenu.permission)
                    "
                  >
                    <el-button
                      :type="dropMenu.type || 'text'"
                      :style="{ color: dropMenu.color }"
                      size="small"
                      @click="dropMenu.fun(scope.row)"
                      >{{ dropMenu.name }}</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </span>
        <span
          v-if="
            !item.select &&
            item.name !== 'operate' &&
            (!item.operate || item.operate.length <= 0)
          "
        >
          {{ scope.row[item.name] }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "TreePage",
  props: {
    treeDatas: {
      type: [Array, Object],
      default: () => [],
    },
    tableRowKey: {
      type: String,
      default: () => "id",
    },
    columns: {
      type: Array,
      default: () => [],
    },
    defaultExpandAll: {
      type: Boolean,
      default: () => true,
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table {
  overflow: scroll;
  border: 1px solid #ebeef5 !important;
  height: calc(100vh - 255px);

  ::v-deep .el-table__empty-block {
    width: 100% !important;
  }

  ::v-deep .el-table__header th {
    background-color: #d9d9d9 !important;
    border: 1px solid #cccccc;
  }

  ::v-deep .el-table__header-wrapper {
    background-color: #d9d9d9 !important;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
}

// 隐藏伪元素（表格多出的横线）
::v-deep.el-table::before {
  display: none !important;
}
</style>
